<template>
  <!-- 视频封面选择 -->
  <div>
    <a-modal
      v-model="visible"
      :title="'素材库'"
      width="60%"
      @cancel="close"
      @ok="handleOk"
    >
      <a-tabs type="card" @change="tagsChange">
        <a-tab-pane
          v-for="(items,$index) in accountIds"
          :key="$index"
          :tab="items.name"
        >
          <a-spin :spinning="loading" tip="正在加载...">
            <my-table-screen
              v-if="items.name !== '智能生成'"
              :showAdvanced="false"
              :queryParam="list[$index].queryParam"
              :queryData="queryData"
              @handleFilter="handleFilter"
            ></my-table-screen>

            <div class="package" v-if="list[$index].materialList.length > 0">
              <div class="list" v-for="(item,index) in list[$index].materialList" :key="index">
                <a-checkbox-group>
                  <div class="material-list ">
                    <a-checkbox :disabled="is_disabled(item)" :value="item" @change="checkChange(item)">
                      
                      <div class="list-content"> 
                        <!-- 横版 -->
                        <div v-if=" vhType === 'horizontal' " class="image-material">
                          <img :src="item.url" alt="">
                        </div>
                        <!-- 竖版 -->
                        <div
                          v-else-if=" vhType === 'vertical' "
                          class="image-material-vertical"
                        >
                          <div class="vertical-image">
                            <img :src="item.url" alt="">
                            </div>
                        </div>
                      </div>
                      <div class="ant-checkbox-wrapper">
                        {{ item.filename }}
                      </div>
                    </a-checkbox>
                  </div>
                </a-checkbox-group>
              </div>
            </div>
            <div v-else class="package no-data"></div>
            <!-- 分页 -->
            <pagination
              v-show="list[$index].total>0"
              :total="list[$index].total"
              :page.sync="list[$index].queryParam.page"
              :limit.sync="list[$index].queryParam.page_size"
              @pagination="getList"
            />
          </a-spin>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import { getImageMaterial,getVideoCover } from "@/api/headlinesApi";

export default {
  props:{
    vhType:{  //素材类型 （vertical/horizontal）
      type:String,
      required:true,
      default:'vertical'
    },
    videoConf:{
      type:Object,
      default:null
    }
  },
  data() {
    return {
      loading:true, // 加载
      accountIds:JSON.parse(localStorage.getItem('campaign')).account_id,
      visible: true,
      list:[],

      queryData:[
        { id:'keyWord',title:'关键词搜索',type:'input',placeholder:'支持ID或名称搜索' },
      ],
      checkedAll:[],

      tagsIndex:0,  // 当前index

      filtering:{ width:'',height:''},  // 素材条件

      material_ids:[], // 选择后的素材
      material_ids_mark:[], // 选择后的素材id标记
    };
  },
  computed:{
    is_disabled(){
      return function(params){
        let _is = false
        if( this.material_ids.length >= 1 ){
          _is = this.material_ids_mark.indexOf(params.id) !== -1 ? false : true
        }
        return _is
      }
    }
  },
  created(){
    this.initial()
    this.getList()
  },
  methods: {
    // 初始化数据
    initial(){
      if ( this.vhType=== 'horizontal' ) {
        this.filtering.width = 1280
        this.filtering.height = 720
      }else if ( this.vhType=== 'vertical') {
        this.filtering.width = 720
        this.filtering.height = 1280
      }

      if( this.videoConf !== null ){
        this.accountIds.unshift( { name:'智能生成',account_id:this.videoConf.account_ids } )
      } else{
        this.accountIds.unshift( { name:'智能生成' } )
      }
      
      this.accountIds.forEach( accountId => {
        let obj = {}
        if( accountId.name !== '智能生成' ){
          obj = {
            materialList:[],
            advertiser_id:accountId.account_id,
            queryParam:{
              advertiser_id:accountId.account_id,
              keyWord:null,
              page:1, 
              page_size:20,
              filtering:this.filtering 
            },
            total:0
          }
        }else {
          obj = {
            materialList:[],
            advertiser_id:accountId.account_id ? accountId.account_id : null,
            queryParam:{
              advertiser_id:accountId.account_id ? accountId.account_id : null,
            },
            total:0
          }
        }
        this.list.push(obj)
      });
      
    },
    // 请求数据
    async getList(){
      this.loading = true
      
      if( this.accountIds[this.tagsIndex].name === '智能生成' ){
        await this.getintelligentImage( this.accountIds[this.tagsIndex].account_id )
      }else {
        await this.getCoverImage()
      }
      this.loading = false
    },
    async getCoverImage(){
      let account_id = this.list[this.tagsIndex].queryParam.advertiser_id
      let queryParam = this.list[this.tagsIndex].queryParam
      const res = await getImageMaterial(account_id,queryParam)
      if(res.code === 'SUCCESS'){
        this.list[this.tagsIndex].materialList = res.data.list
        this.list[this.tagsIndex].total = res.data.page_info.total_number
      }
    },
    async getintelligentImage(account_id){
      if(this.list[this.tagsIndex].materialList.length <= 0){
        let quest = {
          advertiser_id:account_id,
          video_id:this.videoConf.id
        }
        const res = await getVideoCover(account_id,quest)
        if( res.data.status === 'RUNNING' ) await new Promise(r=> setTimeout(() => r(this.getintelligentImage(account_id)) , 2000))
        if(res.data.status === 'SUCCESS') this.list[this.tagsIndex].materialList = res.data.list
      }
    },
    // 选择素材
    checkChange(items){
      if( this.material_ids_mark.indexOf(items.id) === -1 ){
        this.material_ids.push(items)
        this.material_ids_mark.push(items.id)
      }else {
        let index = this.material_ids_mark.indexOf(items.id)
        this.material_ids_mark.splice(index,1)
        this.material_ids.splice(index,1)
      }
    },
    // 切换账号素材库
    tagsChange(index){
      this.tagsIndex = index

      // 清空已选素材
      this.material_ids = []  // {}
      this.material_ids_mark = []  // id
      this.checkedAll = [] // checkbox

      this.getList()
    },
    async handleOk() {
      this.$emit('confirmReplaceCover',this.material_ids[0])
      this.close()
    },
    close(){
      this.$emit('closeModal','cover')
    },
    // 搜索
    handleFilter(){
      this.list[this.tagsIndex].queryParam.page = 1
      this.getList()
    },
  },
}
</script>

<style lang="less" scoped>
  .package{
    width: 100%;
    max-height: 50vh;
    min-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-wrap:wrap;
    padding: 10px 0;
    border: 1px solid #CCCCCC;
    background-attachment: scroll;
    .list{
      width: 25%;
      padding: 0 10px;
      margin-bottom: 10px;
      .ant-checkbox-group{
        width: 100%;
        .material-list{
          padding: 0 10px;
          width: 100%;
          background-color: #F1F1F1;
          line-height: 30px;
          .list-content{
            width: 100%;
            position: relative;
            // 横版素材
            .image-material-vertical{
              position: relative;
              .vertical-image{
                width: 112.5px;
                height: 200px;
                margin: auto;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
            }
            // 竖版素材
            .image-material{
              img{
                width: 100%;
                height: 100%;
              }
            }
          }
          .ant-checkbox-wrapper{
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
</style>